@media (prefers-color-scheme: dark) {
  :root {
    --font-size: 15.5px;
    --border-color: rgba(0, 0, 0, 0.08);
    --subtle-border-color: rgba(0, 0, 0, 0.05);
    --main-background-color: hsl(210, 9%, 98%);
    --body-background-color: #ffffff;
    --reference-item-background: hsl(0, 0%, 99%);
    --brackets-color: rgba(0, 0, 0, 0.25);
    --empty-text-color: hsl(203, 12%, 75%);
  }

  .rm-title-untitled,
  #block-input-ghost > span,
  textarea::placeholder {
    color: var(--empty-text-color) !important;
  }

  body,
  div,
  textarea,
  .level2 {
    font-family: 'Quattro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
  }

  iframe {
    border: none !important;
  }

  .loading-astrolabe {
    position: absolute !important;
    width: 80px !important;
    height: 80px !important;
    opacity: 0.3 !important;
    top: calc(50% - 40px) !important;
    left: calc(50% - 40px) !important;
  }

  #roam-sidebar-logo {
    display: none !important;
  }

  body,
  #app {
    background: var(--main-background-color) !important;
  }

  .roam-center {
    border-left: 1px solid var(--border-color) !important;
    border-top: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
    border-radius: 6px;
    box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.04) !important;
    overflow: visible !important;
    background: var(--body-background-color) !important;
    margin-right: 12px;
    margin-left: 12px;
  }

  .roam-center > div:first-child {
    padding-right: calc(0.5 * (100% - 820px)) !important;
    padding-left: calc(0.5 * (100% - 820px)) !important;
  }

  .roam-topbar {
    background: var(--main-background-color) !important;
    border-bottom: none !important;
  }

  .roam-topbar input#find-or-create-input {
    box-shadow: none !important;
    border: 1px solid var(--border-color) !important;
  }

  .roam-body,
  .roam-topbar,
  #right-sidebar,
  .roam-sidebar-container {
    background: var(--main-background-color) !important;
  }

  #right-sidebar {
    border: none !important;
    transition: none !important;
    overflow: hidden !important;
  }

  #right-sidebar h1 {
    font-size: 18px !important;
  }

  #right-sidebar #roam-right-sidebar-content > div[style] {
    border-bottom: 1px solid var(--subtle-border-color) !important;
  }

  #right-sidebar .hoverparent,
  #right-sidebar .react-resizable {
    max-width: 100% !important;
  }

  #right-sidebar .hoverparent img,
  #right-sidebar .react-resizable img {
    max-width: 100% !important;
  }

  .rm-page-ref-tag {
    color: #9099a1 !important;
  }

  span.checkmark {
    top: -2px;
  }

  .rm-level1 div,
  .rm-level1 textarea {
    font-size: 22px !important;
    line-height: 1.5 !important;
  }

  .rm-level2 div,
  .rm-level2 textarea {
    font-size: 20px !important;
    line-height: 1.5 !important;
  }

  .rm-level3 div,
  .rm-level3 textarea {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  .level2 {
    font-weight: inherit !important;
  }

  .roam-log-container .roam-log-page {
    border-top: 1px solid var(--subtle-border-color) !important;
  }

  .roam-log-container .roam-log-page:first-child {
    min-height: 0 !important;
    border-top: none !important;
  }

  .rm-reference-item {
    background: var(--reference-item-background) !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 6px !important;
    padding: 8px 10px 8px 2px !important;
  }

  .rm-reference-item .rm-block-text {
    font-size: var(--font-size) !important;
  }

  .CodeMirror {
    font-size: 13px !important;
  }

  .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover,
  .roam-body
  .roam-app
  .roam-sidebar-container
  .roam-sidebar-content
  .starred-pages-wrapper
  .starred-pages
  .page:hover {
    color: inherit !important;
    background-color: transparent !important;
  }

  .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button,
  .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper,
  .roam-body
  .roam-app
  .roam-sidebar-container
  .roam-sidebar-content
  .starred-pages-wrapper
  .starred-pages
  .page,
  .bp3-minimal > div {
    color: #666666 !important;
    font-size: 13px !important;
  }

  .roam-sidebar-content {
    padding: 0 !important;
  }

  .roam-sidebar-content > div:not(.log-button):not(:first-child) {
    padding: 0 !important;
  }

  .roam-sidebar-content > div:first-child {
    padding-bottom: 18px !important;
  }

  .starred-pages-wrapper > div:first-child {
    display: none;
  }

  .starred-pages-wrapper .flex-h-box,
  .starred-pages-wrapper .flex-h-box span {
    font-size: 13px !important;
    opacity: 0.6 !important;
  }

  .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button,
  .roam-body
  .roam-app
  .roam-sidebar-container
  .roam-sidebar-content
  .starred-pages-wrapper
  .starred-pages
  .page {
    padding: 6px 24px 6px !important;
  }

  .bp3-icon-small {
    padding-left: 24px !important;
  }

  .rm-block-text {
    max-width: 640px !important;
    font-size: var(--font-size) !important;
  }

  .block-bullet-view {
    margin-bottom: 3px !important;
  }

  .roam-article > div > div h1 {
    font-size: 26px !important;
    font-weight: 700 !important;
    height: auto !important;
    line-height: 1.5 !important;
  }

  .rm-title-display,
  .rm-title-textarea {
    height: auto !important;
    line-height: 1.5 !important;
  }

  .roam-log-container .roam-log-preview h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
  }

  strong {
    font-weight: 700 !important;
  }

  .block-border-left {
    border-left-color: var(--subtle-border-color) !important;
  }

  .rm-reference-main div > strong {
    color: gray !important;
  }

  body {
    background: #171717 !important;
  }

  #app {
    filter: invert(1) hue-rotate(180deg) !important;
  }

  img,
  div#buffer,
  .bp3-portal,
  .intercom-app,
  .loading-astrolabe,
  .bp3-dialog,
  .twitter-tweet,
  iframe {
    filter: invert(1) hue-rotate(180deg) !important;
  }

  .roam-highlight {
    background-color: #e2cb47 !important;
  }

  .bp3-overlay-backdrop {
    background-color: rgba(255, 255, 255, 0.7) !important;
  }

  :root {
    --border-color: rgba(0, 0, 0, 0.07) !important;
    --subtle-border-color: rgba(0, 0, 0, 0.05) !important;
    --main-background-color: hsl(0, 0%, 96%) !important;
    --body-background-color: hsl(0, 0%, 90%) !important;
    --reference-item-background: hsl(0, 0%, 93%) !important;
    --brackets-color: rgba(0, 0, 0, 0.3) !important;
    --empty-text-color: hsl(203, 5%, 70%);
  }
}

